<template>
  <a href="javascript:;" class="go-back" @click="goBack">
    <svg
      t="1617626403532"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2040"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200"
      height="200"
    >
      <path
        d="M704.9216 929.6384a36.096 36.096 0 0 1-24.5248-9.4208l-439.1936-407.04a30.5664 30.5664 0 0 1 0-45.5168l439.1936-407.04a36.608 36.608 0 0 1 48.9984 0 30.5664 30.5664 0 0 1 0 45.4656l-414.72 384.3072 414.72 384.3584a30.5664 30.5664 0 0 1 0 45.4656 36.096 36.096 0 0 1-24.4736 9.4208z"
        :fill="fontColor"
        p-id="2041"
      ></path>
    </svg>
  </a>
</template>

<script>
  export default {
    name: 'GoBack',
    props: {
      fontColor: {
        default: '#FEFEFE'
      }
    },
    methods: {
      goBack() {
        this.$router.back()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .go-back {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      transform: translate(-50%, -50%);
    }
  }
</style>
